<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px" :rules="formRules">
      <el-form-item label="公司名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入公司名称" />
      </el-form-item>
      <el-form-item label="公司电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入公司名称" />
      </el-form-item>
      <el-form-item label="公司地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入公司名称" />
      </el-form-item>
      <el-form-item label="公司介绍" prop="detail">
        <el-input
          v-model="form.detail"
          type="textarea"
          placeholder="请输入公司详情介绍"
          :autosize="{ minRows: 3, maxRows: 5 }"
        />
      </el-form-item>
      <el-form-item label="公司宣传视频" prop="videoId">
        <el-upload
          class="upload-demo"
          drag
          accept=".mp4"
          :action="`${api}/attachment/upload`"
          :headers="headerObj"
          :limit="1"
          :data="uploadData"
          :on-success="upSuccess"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传MP4格式视频文件</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="视频预览">
        <video
          controls="controls"
          autoplay="autoplay"
          :src="`${api}/attachment/previewVideo?attachmentId=${form.videoId}`"
        ></video>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="setCompanyInfo">保存</el-button>
        <el-button @click="onCancel">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { GetCompanyInfo, SetCompanyInfo } from "@/api/index";
import { api } from "@/config/index";
export default {
  data() {
    return {
      api: api, //服务器地址
      form: {
        address: "", //地址
        detail: "", //介绍
        name: "", //公司名称
        phone: "", //电话
        videoId: "", //视频地址
      },
      uploadData: {
        //上传文件信息
        originalName: "ceshi",
        type: "SLIDESHOW",
      },
      headerObj: {
        Authorization: getToken("token"), //携带token
      },
      formRules: {
        //验证
        address: [{ required: true, trigger: "blur", message: "地址不能为空" }],
        detail: [{ required: true, trigger: "blur", message: "介绍不能为空" }],
        name: [
          { required: true, trigger: "blur", message: "公司名称不能为空" },
        ],
        phone: [
          { required: true, trigger: "blur", message: "公司名称不能为空" },
        ],
        videoId: [
          { required: true, trigger: "blur", message: "宣传视频不能为空" },
        ],
      },
    };
  },
  created() {
    this.getCompanyInfo();
  },
  methods: {
    //获取公司详情
    getCompanyInfo() {
      GetCompanyInfo().then((res) => {
        this.form = res.data;
      });
    },
    //上传视频成功时的函数
    upSuccess(data) {
      console.log(data);
      this.form.videoId = data.data.id;
      this.$message.success(data.message);
    },
    //修改信息
    setCompanyInfo() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          SetCompanyInfo(this.form).then((res) => {
            console.log(res);
            this.$message.success("保存成功");
          });
        } else {
          this.$message.error("内容必须填写完整");
        }
      });
    },
    onSubmit() {
      this.$message("submit!");
    },
    onCancel() {
      this.form.address = "";
      this.form.detail = "";
      this.form.name = "";
      this.form.phone = "";
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>
